<route lang="jsonc" type="page">
    {
      "layout": "default",
      "style": {
        "navigationBarTitleText": "我的处方"
      }
    }
    </route>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { getPrescriptionList } from '@/api/prescription'
import { IGetPrescriptionListRequest, IPrescriptionItem } from '@/api/types/prescription'

// 处方列表数据
const prescriptionList = ref<IPrescriptionItem[]>([])
// 加载状态
const loading = ref(false)
// 分页参数
const currentPage = ref(1)
const pageSize = ref(10)
// 总记录数
const total = ref(0)
// 总页数
const pageTotal = ref(0)

// 获取处方列表数据
const fetchPrescriptionList = async () => {
  loading.value = true
  try {
    const params: IGetPrescriptionListRequest = {
      current: currentPage.value.toString(),
      pageSize: pageSize.value.toString()
    }
    console.log(params);
    
    const res = await getPrescriptionList(params)
    console.log(res);
    
    if (res.code === 10000) {
      prescriptionList.value = res.data.rows
      console.log(res.data.rows);

      
      total.value = res.data.total
      pageTotal.value = res.data.pageTotal
    } else {
      console.error('获取处方列表失败:', res.message)
    }
  } catch (error) {
    console.error('获取处方列表异常:', error)
  } finally {
    loading.value = false
  }
}

// 格式化状态文本
const formatStatus = (status: number, medicineOrderId?: string) => {
  switch (status) {
    case 1:
      return medicineOrderId ? '未支付' : '未购买'
    case 2:
      return '已购买'
    case 3:
      return '已失效'
    default:
      return '未知状态'
  }
}

// 格式化状态样式
const statusStyle = (status: number, medicineOrderId?: string) => {
  if (status === 1) {
    return medicineOrderId ? 'color: #FF7D00;' : 'color: #FF7D00;'
  } else if (status === 2) {
    return 'color: #07C160;'
  } else if (status === 3) {
    return 'color: #909399;'
  }
  return ''
}

// 去购药
const goToBuyMedicine = (prescriptionId: string) => {
  // 实现购药逻辑，例如跳转到购药页面
  console.log('去购药:', prescriptionId)
  // uni.navigateTo({ url: `/pages/medicine/purchase?id=${prescriptionId}` })
}

// 去支付
const goToPay = (medicineOrderId: string) => {
  // 实现支付逻辑，例如跳转到支付页面
  console.log('去支付:', medicineOrderId)
  // uni.navigateTo({ url: `/pages/pay/index?id=${medicineOrderId}` })
}

// 查看问诊记录
const viewConsultRecord = (orderId: string) => {
  console.log('查看问诊记录:', orderId)
  // uni.navigateTo({ url: `/pages/consult/record?id=${orderId}` })
}

// 查看原始处方
const viewOriginalPrescription = (prescriptionId: string) => {
  console.log('查看原始处方:', prescriptionId)
  // uni.navigateTo({ url: `/pages/prescription/original?id=${prescriptionId}` })
}

// 分页变化
const handlePageChange = (page: number) => {
  currentPage.value = page
  fetchPrescriptionList()
}

// 页面加载时获取数据
onMounted(() => {
  fetchPrescriptionList()
})
</script>

<template>
  <view class="prescription-container">
    <view class="prescription-list">
      <!-- 处方列表项 -->
      <view v-for="item in prescriptionList" :key="item.id" class="prescription-item">
        <!-- 患者信息 -->
        <view class="patient-info">
          <view class="name-gender-age">
            {{ item.name }} {{ item.genderValue }} {{ item.age }}岁
          </view>
          <view class="status" :style="statusStyle(item.status, item.medicineOrderId)">
            {{ formatStatus(item.status, item.medicineOrderId) }}
          </view>
        </view>

        <!-- 诊断信息 -->
        <view class="diagnosis-info">
          <text class="label">诊断结果: </text>
          <text>{{ item.diagnosis }}</text>
        </view>

        <!-- 开方时间 -->
        <view class="create-time">
          <text class="label">开方时间: </text>
          <text>{{ item.createTime }}</text>
        </view>

        <!-- 药品列表 -->
        <view class="medicine-list">
          <view v-for="medicine in item.medicines" :key="medicine.id" class="medicine-item">
            <view class="medicine-name-specs">
              <text class="medicine-name">{{ medicine.name }}</text>
              <text class="medicine-specs">{{ medicine.specs }}</text>
            </view>
            <view class="medicine-quantity">x{{ medicine.quantity }}</view>
            <view class="medicine-usage">
              {{ medicine.usageDosag }}
            </view>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-buttons">
          <button class="consult-record-btn" @click="viewConsultRecord(item.orderId)">问诊记录</button>
          <button class="original-prescription-btn" @click="viewOriginalPrescription(item.id)">原始处方</button>
          <template v-if="item.status === 1">
            <button v-if="item.medicineOrderId" class="pay-btn" @click="goToPay(item.medicineOrderId)">去支付</button>
            <button v-else class="buy-btn" @click="goToBuyMedicine(item.id)">去购药</button>
          </template>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="prescriptionList.length === 0 && !loading" class="empty-state">
      <text>暂无处方记录</text>
    </view>

    <!-- 加载中 -->
    <view v-if="loading" class="loading-state">
      <uni-loading></uni-loading>
    </view>

    <!-- 分页 -->
    <view v-if="pageTotal > 1" class="pagination">
      <uni-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @change="handlePageChange"
      ></uni-pagination>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.prescription-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.prescription-list {
  gap: 20rpx;
}

.prescription-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.patient-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.name-gender-age {
  font-size: 32rpx;
  font-weight: bold;
}

.status {
  font-size: 28rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
}

.diagnosis-info,
.create-time {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
}

.label {
  color: #909399;
}

.medicine-list {
  margin: 20rpx 0;
  gap: 16rpx;
}

.medicine-item {
  padding: 16rpx;
  background-color: #f9f9f9;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
}

.medicine-name-specs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.medicine-name {
  font-size: 28rpx;
  font-weight: bold;
}

.medicine-specs {
  font-size: 26rpx;
  color: #606266;
}

.medicine-quantity {
  font-size: 26rpx;
  color: #606266;
}

.medicine-usage {
  font-size: 26rpx;
  color: #606266;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
  margin-top: 20rpx;
}

.consult-record-btn,
.original-prescription-btn {
  background-color: #f5f5f5;
  color: #606266;
  font-size: 26rpx;
  padding: 0 24rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
}

.buy-btn {
  background-color: #07c160;
  color: #fff;
  font-size: 26rpx;
  padding: 0 24rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
}

.pay-btn {
  background-color: #1989fa;
  color: #fff;
  font-size: 26rpx;
  padding: 0 24rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300rpx;
  color: #909399;
  font-size: 28rpx;
}

.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300rpx;
}

.pagination {
  margin-top: 30rpx;
  display: flex;
  justify-content: center;
}
</style>